<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.alieditContainer {
				position:relative;
			}
			.alieditContainer .i-text {
				position:absolute;
				color:#fff;
				opacity:0.2;
				width:306px;
				height:48px;
				font-size:12px;
				left:0;
				-webkit-user-select:initial;
				/*取消禁用选择页面元素*/
							z-index:9;
				padding:0;
				borde:0;
			}
			.alieditContainer .sixDigitPassword {
				width:306px;
				height:22px;
				cursor:text;
				background:#fff;
				outline:none;
				position:relative;
				padding:13px 0;
				border:1px solid #ddd;
				border-radius:5px;
			}
			.alieditContainer .sixDigitPassword i {
				width:50px;
				height:16px;
				float:left;
				display:block;
				padding:4px 0;
				border-left:1px solid #cccccc;
			}
			.alieditContainer .sixDigitPassword i:first-child {
				border-left:0;
			}
			.alieditContainer .sixDigitPassword i.active {
				background-image:url("https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif");
				background-repeat:no-repeat;
				background-position:center center;
			}
			.alieditContainer .sixDigitPassword b {
				display:block;
				margin:5px auto 4px auto;
				width:7px;
				height:7px;
				overflow:hidden;
				display:none;
				/*visibility:hidden;
				*/
							background:#000;
				border-radius:100%;
			}
			.alieditContainer .sixDigitPassword .guangbiao {
				width:50px;
				height:48px;
				position:absolute;
				display:block;
				left:0px;
				top:-1px;
				border:1px solid rgba(82,168,236,.8);
				border:1px solid #00ffff\9;
				border-radius:5px;
				visibility:visible;
				-webkit-box-shadow:inset 0px 2px 2px rgba(0,0,0,0.75),0 0 8px rgba(82,168,236,0.6);
				box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
			}


		</style>
	</head>
	<body>
		<div class="alieditContainer" id="payPassword_container">
		    <input minlength="6" maxlength="6" tabindex="1" id="payPassword_rsainput" name="payPassword_rsainput" class="ui-input i-text" oncontextmenu="return false" onpaste="return false" oncopy="return false" oncut="return false" autocomplete="off" value="" type="password">
		    <div class="sixDigitPassword" tabindex="0">
		        <i class="active"><b></b></i>
		        <i><b></b></i>
		        <i><b></b></i>
		        <i><b></b></i>
		        <i><b></b></i>
		        <i><b></b></i>
		        <span class="guangbiao" style="left:0px;"></span>
		    </div>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script>
		$(window).ready(function() {

    $(".i-text").keyup(function() {
        var inp_v = $(this).val();
        var inp_l = inp_v.length;
        //$("p").html( "input的值为：" + inp_v +"; " + "值的长度为:" + inp_l);//测试用

        for (var x = 0; x <= 6; x++) {
            $("p").html(inp_l); //测试

            $(".sixDigitPassword").find("i").eq(inp_l).addClass("active").siblings("i").removeClass("active");
            $(".sixDigitPassword").find("i").eq(inp_l).prevAll("i").find("b").css({
                "display": "block"
            });
            $(".sixDigitPassword").find("i").eq(inp_l - 1).nextAll("i").find("b").css({
                "display": "none"
            });

            $(".guangbiao").css({
                "left": inp_l * 51
            }); //光标位置

            if (inp_l == 0) {
                $(".sixDigitPassword").find("i").eq(0).addClass("active").siblings("i").removeClass("active");
                $(".sixDigitPassword").find("b").css({
                    "display": "none"
                });
                $(".guangbiao").css({
                    "left": 0
                });
            } else if (inp_l == 6) {
                $(".sixDigitPassword").find("b").css({
                    "display": "block"
                });
                $(".sixDigitPassword").find("i").eq(5).addClass("active").siblings("i").removeClass("active");
                $(".guangbiao").css({
                    "left": 5 * 51
                });
            }

        }
    });

});
	</script>
	</body>
</html>
